<template>
<div>
    <div v-if="isshow" class="content" :style="{backgroundImage:'url('+backgroundpic+')'}">
        <div class="item" @click="weilan(1)">
          <div>
            <img :src="weilandata.weilan1?weilan1show:weilan1hide" alt="">
          </div>
          <div class="item_name" :style="{color:weilandata.weilan1?'#72edf5':'#fff'}">外围</div>
        </div>
         <div class="item" @click="weilan(2)">
          <div>
            <img :src="weilandata.weilan2?weilan2show:weilan2hide" alt="">
          </div>
          <div class="item_name" :style="{color:weilandata.weilan2?'#72edf5':'#fff'}">干道</div>
        </div>
        <div class="item" @click="weilan(3)">
          <div>
            <img :src="weilandata.weilan3?weilan3show:weilan3hide" alt="">
          </div>
          <div class="item_name" :style="{color:weilandata.weilan3?'#72edf5':'#fff'}">楼栋</div>
        </div>
         <div class="item" @click="weilan(4)">
          <div>
            <img :src="weilandata.weilan4?weilan4show:weilan4hide" alt="">
          </div>
          <div class="item_name" :style="{color:weilandata.weilan4?'#72edf5':'#fff'}">楼层</div>
        </div>
    </div>
    <div v-if="showDetail">
      <list :params="params" :type="type" @closeMask="closeMask"></list>
    </div>
   <div class="xmonitor">
    <div class="data-ctx" @click="closeWeilan" :style="{backgroundImage:'url('+borderBg+')'}">
      <p>
        <img src="@/assets/images/icon_fkq.png" alt style="margin-top: 16px;" />
      </p>
      <p>防控圈</p>
    </div>

  </div>
   <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
       v-if="dialogVisible" v-dialogDrag
      class="jk-dialog xmonitor1"
      style="z-index:10000;"
    >
      <div id="h5videobox">
        <video
          style="height:600px"
          class="h5video"
          id="h5sVideo1"
          autoplay
          webkit-playsinline
          playsinline
        ></video>
      </div>
    </el-dialog>
</div>

</template>
<script>
import shibiequan from './data.json'
import zhoujie from './zhoujie.json'
import tubiao from './tubiao.json'
import zuobiao from './zuobiao.json'
import List from './list.vue'
import data_in from './data_in.json'
import data_out from './data_out.json'
import waiwei from './waiwei.json'
import loudong from './loudong.json'
import gandao from './gandao.json'
import {
  firstIdentificationCircle,
  secondIdentificationCircle,
  thirdIdentificationCircle,
  fourthIdentificationCircle,
  getDistrictVehicleForPage} from '@/api/device'
export default {
  name: "xminitor",
  data() {
    return {
      borderBg: require("@/assets/images/bg_monitor.png"),
      isshow:false,
      backgroundpic:require("@/assets/images/background.png"),
      weilandata:{
        weilan1:false,
        weilan2:false,
        weilan3:false,
        weilan4:false
      },
      showDetail:false,
      type:"",
      params:{},
      weilan1show:require('@/assets/images/icon_ww.png'),
      weilan1hide:require('@/assets/images/icon_ww0.png'),
      weilan2show:require('@/assets/images/icon_gd.png'),
      weilan2hide:require('@/assets/images/icon_gd0.png'),
      weilan3show:require('@/assets/images/icon_ld.png'),
      weilan3hide:require('@/assets/images/icon_ld0.png'),
      weilan4show:require('@/assets/images/icon_lc.png'),
      weilan4hide:require('@/assets/images/icon_lc0.png'),
      dialogVisible:false,
       dialogTitle: "",
      token: "",
      v1: null,
      ifstart: false
    };
  },
  props:{
    newMap:{
      type: Object,
      default: {}
    },
    code:{
      type:String,
      default:''
    }
  },
  components:{
    List
  },
  watch: {
    dialogVisible(val, oldVal){
      if(val==false && oldVal==true){
        console.log("触发关闭")
        if(this.v1){
          this.v1.disconnect();
          // this.v1 = null;
        }

      }
    }
  },
  mounted() {
  },
  methods: {
    closeWeilan(){
      if(this.isshow){
       this.closeall()
      }
      this.isshow=!this.isshow
    },
    closeMask(){
      this.showDetail=false
    },
    onClickHandle(type) {
      if (type === "warn") {
        return;
      }
      this.$emit("onClickHandle", type);
    },
    closeall(){
        this.newMap.removeLayer('first')
        this.newMap.removeLayer('second')
        this.newMap.removeLayer('third')
        this.newMap.removeLayer('fourth')
         this.newMap.removeLayer('first1')
        this.newMap.removeLayer('second1')
        this.newMap.removeLayer('third1')
        this.newMap.removeLayer('fourth1')
        //this.newMap.clearAllFeature()
        this.weilandata.weilan1=false;
        this.weilandata.weilan2=false;
        this.weilandata.weilan3=false;
        this.weilandata.weilan4=false;
        console.log('closeall')
    },
     drawPointsByVideo(items, img,lay) {
      var x;
      var y;
      var that=this
      console.log('++++++++')
      console.log(items)
      for (var i = 0; i < items.length; i++) {
        var o = items[i];
        var img =img
        var style = {
          image: img,
          imageSize: [34, 76],
          imageCenter: ["C", "C"],
          imageOpacity: 1
        };

        var features = that.newMap.addFeatures(lay, "Point", [
          {
            x: o.x,
            y: o.y,
            type:o
          }
        ]);
        style = that.newMap.createStyle(style);
        features[0].setStyle(style);
      }
      return features;
    },
    async weilan(i){
      var that=this
      let weilandata=this.weilandata
      if(i==1&&this.weilandata.weilan1){
        this.newMap.removeLayer('first')
        this.newMap.removeLayer('first1')
        weilandata.weilan1=false
      }else{
        if(i==1){
           this.closeall()
      this.newMap.addLayer({
            id: 'first',
            style: new oMap.style.Style({
              fill: new oMap.style.Fill({
                color: 'rgba(255, 255, 255, 0)'
              }),
              stroke: new oMap.style.Stroke({
                color: '#ff5722',
                width: 4
              })
            }),
            events: {
               featureClick: function(f) {
                  // console.log("*********");
                  // console.log('我是图层1')
                  // console.log(f.attributes.type)
                  // if(f.attributes.type.deviceType=="车辆抓拍"){
                  //   that.showDetail=true
                  //   that.type="car"
                  //   let params={
                  //     pageNum:1,
                  //     pageSize:10,
                  //     placeId:that.code,
                  //     id:f.attributes.type.camerId
                  //   }
                  //   that.params=params

                  // }
                  // if(f.attributes.type.deviceType=="人脸抓拍"){
                  //   that.showDetail=true
                  //   that.type="menjin"
                  //   let params={
                  //     pageNum:1,
                  //     pageSize:10,
                  //     placeId:that.code,
                  //     camerId:f.attributes.type.camerId
                  //   }
                  //   that.params=params

                  // }
                  if(f.attributes.type.deviceType=='xiaofang'){
                     that.dialogVisible = true;
                      that.dialogTitle = f.attributes.type.title;
                      var conf1 = {
                        videoid: "h5sVideo1",
                        protocol: "http:", //http: or https:
                        host: "192.168.9.138:8085", //localhost:8080
                        rootpath: "/", // '/' or window.location.pathname
                        token: "token" +f.attributes.type.token,
                        hlsver: "v1", //v1 is for ts, v2 is for fmp4
                        session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
                      };
                      console.log("*********");

                      that.$nextTick(() => {
                        var v1;
                        if (that.token == "") {
                          //init
                          that.token =f.attributes.type.token;
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();
                        }
                        //切换摄像头
                        let p = new Promise((res, rej) => {
                          if (that.token != f.attributes.type.token) {
                            if (that.v1 != null) {
                              that.v1.disconnect();
                              that.v1 = null;
                              document.getElementById("h5sVideo1").remove();
                              document.getElementById("h5videobox").innerHTML =
                                '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';

                               res();
                            }
                          }
                        });
                        p.then(res => {
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();
                        });
                      });
                  }

                  // console.log("*********");
                }
            }

        })
         var lay = this.newMap.addLayer({
        id: "first1",
        type: "vector",
        events: {
          featureClick: function(f) {
             console.log("*********");
                  console.log('我是图层111')
                  console.log(f.attributes.type)
                  // if(f.attributes.type.deviceType=="车辆抓拍"){
                  //   that.showDetail=true
                  //   that.type="car"
                  //   let params={
                  //     pageNum:1,
                  //     pageSize:10,
                  //     placeId:that.code,
                  //     id:f.attributes.type.camerId
                  //   }
                  //   that.params=params

                  // }
                  // if(f.attributes.type.deviceType=="人脸抓拍"){
                  //   that.showDetail=true
                  //   that.type="menjin"
                  //   let params={
                  //     pageNum:1,
                  //     pageSize:10,
                  //     placeId:that.code,
                  //     camerId:f.attributes.type.camerId
                  //   }
                  //   that.params=params

                  // }
                  if(f.attributes.type.deviceType=='xiaofang'){
                     that.dialogVisible = true;
                      that.dialogTitle = f.attributes.type.title;
                      var conf1 = {
                        videoid: "h5sVideo1",
                        protocol: "http:", //http: or https:
                        host: "192.168.9.138:8085", //localhost:8080
                        rootpath: "/", // '/' or window.location.pathname
                        token: "token" +f.attributes.type.token,
                        hlsver: "v1", //v1 is for ts, v2 is for fmp4
                        session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
                      };
                      console.log("*********");

                      that.$nextTick(() => {
                        var v1;
                        if (that.token == "") {
                          //init
                          that.token =f.attributes.type.token;
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();

                        }
                        //切换摄像头
                        let p = new Promise((res, rej) => {
                          if (that.token != f.attributes.type.token) {
                            if (that.v1 != null) {
                              that.v1.disconnect();
                              that.v1 = null;
                                document.getElementById("h5sVideo1").remove();
                              document.getElementById("h5videobox").innerHTML =
                                '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
                              res();
                            }
                          }
                        });
                        p.then(res => {
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();
                        });
                      });
                  }

                  console.log("*********");

          },
          featureMouseMove:function(f,e){
            var id="test"
            var position=[f.attributes.x,f.attributes.y]
            if(f.attributes.type.deviceType=='xiaofang'){
              let element = document.createElement('div')
              element.style.zIndex="9999"
              var template='<div class="boxline1">'+f.attributes.type.title+'</div>'
              element.innerHTML=template
              var positioning=['L','B']
              that.newMap.addPopup(
                  id,
                  position,
                  element,
                  null,
                  positioning
                )
            }

          },
           featureMouseOut:function(f){
            setTimeout(()=>{
              that.newMap.removePopup('test')
              that.newMap.clearAllPopup()
              console.log('remove了')
            },1000)

          }
        }
      });
        // var zhoujieimg
        // tubiao.map(item=>{
        //   if(item.name=='周界围栏'){
        //     zhoujieimg=item.pic
        //   }
        // })

        // this.drawPointsByVideo(zhoujie,zhoujieimg,lay)
        // var renxingimg
        // var renxing=[]
        // var renlian=[]
        // var renlianimg
        // var car=[]
        // var carimg
        // let res=await this.getData(1)
        // res.map(item=>{
        //   if(item.resultname=='人脸抓拍'){
        //     renlian=item.itmes.map(item=>{
        //       return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"人脸抓拍"})
        //     })
        //   }
        //   if(item.resultname=='车辆抓拍'){
        //     car=item.itmes.map(item=>{
        //       return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"车辆抓拍"})
        //     })
        //   }

        // })
        // zuobiao.map(item=>{
        //   if(item.name=='人行通道'){
        //     renxing.push({
        //       x:item.x,
        //       y:item.y
        //     })
        //   }

        // })
        // tubiao.map(item=>{
        //   if(item.name=='人行通道'){
        //     renxingimg=item.pic
        //   }
        //   if(item.name=='人脸抓拍'){
        //     renlianimg=item.pic
        //   }
        //   if(item.name=='车辆抓拍'){
        //     carimg=item.pic
        //   }
        // })
        var monitorimg="";

        var datain=JSON.parse(JSON.stringify(waiwei))
        var datain=datain.map(item=>{
          return{
            x:item[2],
            y:item[3],
            title:item[1],
            token:item[4],
            deviceType:item[5]
          }
        })
        console.log(lay)
        this.drawPointsByVideo( datain,monitorimg,lay);
          // this.newMap.removeLayer('first')
          //  this.newMap.removeLayer('first1')
        // this.drawPointsByVideo(renxing,renxingimg,lay)

        // this.drawPointsByVideo(car,carimg,lay)
        // this.drawPointsByVideo(renlian,renlianimg,lay)

        //this.newMap.addFeaturesByGeoJSON('first',shibiequan.shibiequan1)
        weilandata.weilan1=true
        }
      }

      if(i==2&&this.weilandata.weilan2){
        this.newMap.removeLayer('second')
        this.newMap.removeLayer('second1')
        weilandata.weilan2=false
      }else{
        if(i==2){
        this.closeall()
        this.newMap.addLayer({
          id: 'second',
          style: new oMap.style.Style({
            fill: new oMap.style.Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new oMap.style.Stroke({
              color: '#ffcc33',
              width: 2.5
            })
          }),
          events: {
               featureClick: function(f) {

                  // console.log('我是图层2')
                  // console.log(f.attributes)
                  // if(f.attributes.type.deviceType=='污水井液位监测'){
                  //   var data=[f.attributes.type.camerId,f.attributes.type.name,2,3,4,f.attributes.type.type]
                  //   that.$emit("getHistoryOneDay",data)
                  // }


                  //   if(f.attributes.type.deviceType=='xiaofang'){
                  //    that.dialogVisible = true;
                  //     that.dialogTitle = f.attributes.type.title;
                  //     var conf1 = {
                  //       videoid: "h5sVideo1",
                  //       protocol: "http:", //http: or https:
                  //       host: "192.168.9.138:8085", //localhost:8080
                  //       rootpath: "/", // '/' or window.location.pathname
                  //       token: "token" +f.attributes.type.token,
                  //       hlsver: "v1", //v1 is for ts, v2 is for fmp4
                  //       session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
                  //     };
                  //     console.log("*********");

                  //     that.$nextTick(() => {
                  //       var v1;
                  //       if (that.token == "") {
                  //         //init
                  //         that.token =f.attributes.type.token;
                  //         that.v1 = H5sPlayerCreate(conf1);
                  //         that.v1.connect();
                  //       }
                  //       //切换摄像头
                  //       let p = new Promise((res, rej) => {
                  //         if (that.token != f.attributes.type.token) {
                  //           if (that.v1 != null) {
                  //             that.v1.disconnect();
                  //             that.v1 = null;
                  //             document.getElementById("h5sVideo1").remove();
                  //             document.getElementById("h5videobox").innerHTML =
                  //               '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
                  //             res();
                  //           }
                  //         }
                  //       });
                  //       p.then(res => {
                  //         that.v1 = H5sPlayerCreate(conf1);
                  //         that.v1.connect();
                  //       });
                  //     });
                  // }




                }
            }
        })


         var lay = this.newMap.addLayer({
        id: "second1",
        type: "vector",
        events: {
          featureClick: function(f) {
                  console.log(f.attributes)
                  if(f.attributes.type.deviceType=='污水井液位监测'){
                    var data=[f.attributes.type.camerId,f.attributes.type.name,2,3,4,f.attributes.type.type]
                    that.$emit("getHistoryOneDay",data)
                  }


                    if(f.attributes.type.deviceType=='xiaofang'){
                     that.dialogVisible = true;
                      that.dialogTitle = f.attributes.type.title;
                      console.log('conf')
                      var conf1 = {
                        videoid: "h5sVideo1",
                        protocol: "http:", //http: or https:
                        host: "192.168.9.138:8085", //localhost:8080
                        rootpath: "/", // '/' or window.location.pathname
                        token: "token" +f.attributes.type.token,
                        hlsver: "v1", //v1 is for ts, v2 is for fmp4
                        session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
                      };
                      console.log("*********");

                      that.$nextTick(() => {
                        var v1;
                        if (that.token == "") {
                          //init
                            that.token =f.attributes.type.token;
                            that.v1 = H5sPlayerCreate(conf1);
                            that.v1.connect();
                        }

                        //切换摄像头
                        let p = new Promise((res, rej) => {
                          if (that.token != f.attributes.type.token) {
                            if (that.v1 != null) {
                              that.v1.disconnect();
                              that.v1 = null;
                              document.getElementById("h5sVideo1").remove();
                              document.getElementById("h5videobox").innerHTML =
                                '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
                               res();
                            }
                          }
                        });
                        p.then(res => {
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();
                        });
                      });
                  }



          },
          featureMouseMove:function(f,e){
            var id="test"
            var position=[f.attributes.x,f.attributes.y]
            if(f.attributes.type.deviceType=='xiaofang'){
              let element = document.createElement('div')
              element.style.zIndex="9999"
              var template='<div class="boxline1">'+f.attributes.type.title+'</div>'
              element.innerHTML=template
              var positioning=['L','B']
              that.newMap.addPopup(
                  id,
                  position,
                  element,
                  null,
                  positioning
                )
            }

          },
           featureMouseOut:function(f){
            setTimeout(()=>{
              that.newMap.removePopup('test')
              that.newMap.clearAllPopup()
              console.log('remove了')
            },1000)

          }
        }
      });



      //   var wushuijingimg
      //    tubiao.map(item=>{
      //     if(item.name=='污水井液位监测'){
      //       wushuijingimg=item.pic
      //     }

      //   })
      //   let res=await this.getData(2)
      // var wushujing=[]
      //   res.map(item=>{
      //      if(item.resultname=='污水井液位监测'){
      //       wushujing=item.itmes.map(item=>{
      //         return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"污水井液位监测"})
      //       })
      //     }
      //   })
         var monitorimg="";

       var dataout=gandao

        var dataout=dataout.map(item=>{
          return{
            id:parseInt(item[0]),
            x:item[2],
            y:item[3],
            title:item[1],
            token:item[4],
            deviceType:item[5]
          }
        })
        // //高空抛物
        // var includeIds=[56,57]
        // var newmonitor=dataout.filter(item=>includeIds.includes(item.id))
        // var monitors=dataout.filter(item=>!includeIds.includes(item.id))
        // var newmonitorimg='新的图片base64'

        this.drawPointsByVideo(dataout,monitorimg,lay);

      //  this.drawPointsByVideo( newmonitor,newmonitorimg,lay);
        // this.drawPointsByVideo(wushujing,wushuijingimg,lay)
        this.newMap.addFeaturesByGeoJSON('second',shibiequan.shibiequan2)
        weilandata.weilan2=true
        }
      }
      if(i==3&&this.weilandata.weilan3){
        this.newMap.removeLayer('third')
        this.newMap.removeLayer('third1')
        weilandata.weilan3=false
      }else{
        if(i==3){
           this.closeall()
             this.newMap.addLayer({
            id: 'third',
            style: new oMap.style.Style({
              fill: new oMap.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
              }),
              stroke: new oMap.style.Stroke({
                color: '#ff9800',
                width: 2
              })
            })
          })
           var monitorimg="";

          // "120.38597143765037","31.562951041571793"
          // "120.38517074259835","31.563012257295483"
              //  var loudong=JSON.parse(JSON.stringify(loudong))
        console.log(loudong)
          //var monitordata=[{x:"120.38597143765037",y:"31.562951041571793"},{x:"120.38517074259835",y:"31.562951041571793"}]
          var monitor=[]

          var lay = this.newMap.addLayer({
        id: "third1",
        type: "vector",
        events: {
          featureClick: function(f) {
                  console.log(f.attributes)
                  if(f.attributes.type.deviceType=='污水井液位监测'){
                    var data=[f.attributes.type.camerId,f.attributes.type.name,2,3,4,f.attributes.type.type]
                    that.$emit("getHistoryOneDay",data)
                  }


                    if(f.attributes.type.deviceType=='xiaofang'){
                     that.dialogVisible = true;
                      that.dialogTitle = f.attributes.type.title;
                      console.log('conf')
                      var conf1 = {
                        videoid: "h5sVideo1",
                        protocol: "http:", //http: or https:
                        host: "192.168.9.138:8085", //localhost:8080
                        rootpath: "/", // '/' or window.location.pathname
                        token: "token" +f.attributes.type.token,
                        hlsver: "v1", //v1 is for ts, v2 is for fmp4
                        session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
                      };
                      console.log("*********");

                      that.$nextTick(() => {
                        var v1;
                        if (that.token == "") {
                          //init
                          that.token =f.attributes.type.token;
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();
                        }
                        //切换摄像头
                        let p = new Promise((res, rej) => {
                          if (that.token != f.attributes.type.token) {
                            if (that.v1 != null) {
                              that.v1.disconnect();
                              that.v1 = null;
                              document.getElementById("h5sVideo1").remove();
                              document.getElementById("h5videobox").innerHTML =
                                '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';

                               res();
                            }
                          }
                        });
                        p.then(res => {
                          that.v1 = H5sPlayerCreate(conf1);
                          that.v1.connect();

                        });
                      });
                  }



          },
          featureMouseMove:function(f,e){
            var id="test"
            var position=[f.attributes.x,f.attributes.y]
            if(f.attributes.type.deviceType=='xiaofang'){
              let element = document.createElement('div')
              element.style.zIndex="9999"
              var template='<div class="boxline1">'+f.attributes.type.title+'</div>'
              element.innerHTML=template
              var positioning=['L','B']
              that.newMap.addPopup(
                  id,
                  position,
                  element,
                  null,
                  positioning
                )
            }

          },
           featureMouseOut:function(f){
            setTimeout(()=>{
              that.newMap.removePopup('test')
              that.newMap.clearAllPopup()
              console.log('remove了')
            },1000)

          }
        }
      });

           loudong.map(item=>{
              monitor.push({
            x:item[2],
            y:item[3],
            title:item[1],
            token:item[4],
            deviceType:item[5]
          })
            })
          this.drawPointsByVideo(monitor,monitorimg,lay)
          this.newMap.addFeaturesByGeoJSON('third',shibiequan.shibiequan3)
          weilandata.weilan3=true
        }
      }
      if(i==4&&this.weilandata.weilan4){
        this.newMap.removeLayer('fourth')
         this.newMap.removeLayer('fourth1')
        weilandata.weilan4=false
      }else{
        if(i==4){
        this.closeall()
        let lay=this.newMap.addLayer({
          id: 'fourth',
          style: new oMap.style.Style({
            fill: new oMap.style.Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new oMap.style.Stroke({
              color: '#CDDC39',
              width: 2
            })
          }),
            events: {
               featureClick: function(f) {
                //  console.log('我是图层4')
                //   console.log("*********");

                //   console.log(f.attributes.type)
                //   var data=[f.attributes.type.camerId,f.attributes.type.name,2,3,4,f.attributes.type.type]
                //   that.$emit("getHistoryOneDay",data)

                //   console.log("*********");
                }
            }
        })
        var lay = this.newMap.addLayer({
        id: "fourth1",
        type: "vector",
        events: {
         featureClick: function(f) {
           console.log('我是图层4')
                  console.log("*********");

                  console.log(f.attributes.type)
                  var data=[f.attributes.type.camerId,f.attributes.type.name,2,3,4,f.attributes.type.type]
                  that.$emit("getHistoryOneDay",data)

                  console.log("*********");
        	}
        }
      });
        let res=await this.getData(4)
        var shuiyaimg,shuixiangimg,shuibangfangimg,keranqitiimg
        var shuiya=[]
        var shuixiang=[]
        var shuibangfang=[]
        var keranqiti=[]
        tubiao.map(item=>{
          if(item.name=='消防水压'){
            shuiyaimg=item.pic
          }
          if(item.name=='消防水箱'){
            shuixiangimg=item.pic
          }
          if(item.name=='水泵房漏水'){
            shuibangfangimg=item.pic
          }
          if(item.name=='可燃气体监测'){
            keranqitiimg=item.pic
          }
        })
        res.map(item=>{
           if(item.resultname=='消防水压'){
            shuiya=item.itmes.map(item=>{
              return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"消防水压"})
            })
          }
          if(item.resultname=='消防水箱'){
            shuixiang=item.itmes.map(item=>{
              return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"消防水箱"})
            })
          }
          if(item.resultname=='水泵房漏水'){
            shuibangfang=item.itmes.map(item=>{
              return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"水泵房漏水"})
            })
          }
          if(item.resultname=='可燃气体监测'){
            keranqiti=item.itmes.map(item=>{
              return Object.assign(item,{x:item.lx,y:item.ly,deviceType:"可燃气体监测"})
            })
          }
        })
        this.drawPointsByVideo(shuiya,shuiyaimg,lay)
        this.drawPointsByVideo(keranqiti,keranqitiimg,lay)
        this.drawPointsByVideo(shuixiang,shuixiangimg,lay)
        this.drawPointsByVideo(shuibangfang,shuibangfangimg,lay)
        this.newMap.addFeaturesByGeoJSON('fourth',shibiequan.shibiequan4)
        weilandata.weilan4=true
        }
      }


      this.weilandata=weilandata

    },
    async getData(i){
      if(i==1){
         let res=await firstIdentificationCircle(this.code)
         return res.data
      }
      if(i==2){
        let res=await secondIdentificationCircle(this.code)
        return res.data
      }
      if(i==4){
        let res=await fourthIdentificationCircle(this.code)
        return res.data
      }

    }

  }
};
</script>

<style lang="less" scoped>
.xmonitor {
  width: 110px;
  height: 88px;
  position: absolute;
  bottom: 33px;
  left: 20px;
  z-index: 999;
  cursor: pointer;
  .data-ctx {
    height: 90px;
  }
  p {
    color: #72edf5;
    font-size: 14px;
  }
  p:nth-child(2) {
    margin-top: -7px;
  }

}

.content{
  width: 110px;
  // height: 200px;
   background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  position: absolute;
  bottom: 130px;
  left: 20px;
  z-index: 999;
  color: #72edf5;
  cursor: pointer;
  padding: 15px 0 0;
  .item{
    margin-bottom:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .item_name{
      margin-left: 5px;
    }
  }
}
</style>
<style lang="">
.boxline1{
  background: rgba(9,15,31);
  color:#fff;
  border:1px solid rgba(94,177,211);
  line-height: 25px;
  height:27px;
  width: 160px;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  z-index: 11111;
}
.xmonitor1>.el-dialog{

    /* left: -300px; */

}
</style>
